<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件处理</title>
</head>
<body>
<!--

-->
<div id="example">
    <h2>1. 绑定监听</h2>
      <button @click="test1">test1</button>
      <button @click="test2('atguigu')">test2</button>

      <!-- $event:代表事件对象,无参时默认传递 -->
      <button @click="test3">test3</button>
      <button @click="test4(123,$event)">test4</button>

    <h2>2. 事件修饰符</h2>
      <div style="width: 200px;height: 200px;background: red;" @click="test5">
        <div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div>
      </div>
      <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

    <h2>3. 按键修饰符</h2>
      <input type="text" @keyup.13="test8">
      <input type="text" @keyup.enter="test8">
</div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#example',
        data:{
          test1(){
            alert('test1');
          },
          test2(msg){
            alert(msg);
          },
          test3(event){
            alert(event.target.innerHTML);
          },
          test4(number,event){
            alert(number+'------'+event.target.innerHTML);
          },
          test5(){
            alert('out');
          },
          test6(event){
            //event.stopPropagation();    //停止事件冒泡，此处注释掉采用vue方式
            alert('inner');
          },
          test7(event){
            //event.preventDefault();   //阻止事件默认行为，此处注释掉采用vue方式
            alert('点击了');
          },
          test8(event){
            //if (event.keyCode === 13) {   //固定某个按键(举例Enter回车键)事件，此处注释掉采用vue方式
              alert(event.target.value+'-----'+event.keyCode);
            //}
          }
        }
      });
    </script>
</body>
</html>
